<template>
  <div class="box_a">
    <div class="v_item">
      <div class="val">{{ info.a }}<span class="unit">万</span></div>
      <div class="text">新订单</div>
    </div>
    <div class="v_item">
      <div class="val">{{ info.b }}<span class="unit">万</span></div>
      <div class="text">在产</div>
    </div>
    <div class="v_item">
      <div class="val">{{ info.c }}<span class="unit">万</span></div>
      <div class="text">齐套</div>
    </div>
    <div class="v_item">
      <div class="val">{{ info.d }}<span class="unit">万</span></div>
      <div class="text">缺料</div>
    </div>
    <div class="v_item">
      <div class="val">{{ info.e }}<span class="unit">万</span></div>
      <div class="text">需发货</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BoxRightA',
  data() {
    return {
      info: {
        a: 2.2,
        b: 4.7,
        c: 25.1,
        d: 8.6,
        e: 1.8
      }
    }
  }
}
</script>
<style scoped>
.box_a {
  padding: 4px 10px;
  display: flex;
  height: 115px;
}
.box_a .v_item {
  flex: 1;
  background-image: url(~@/assets/images/cont-bg2.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.val {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  height: 83px;
  padding-top: 13px;
}
.text {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.unit {
  font-size: 22px;
  padding-left: 2px;
}
</style>
